import React from 'react';
import { Row, Col, Tooltip } from 'antd';
import UserList from './list';
import CommonListsIndex from 'src/components/CommonLists/index';
import FilterTool from 'src/components/FilterTool';
import Modal from 'src/components/Modal/index';
import { MODEL_TYPE } from 'src/utils/constant';
import { timeTrans } from 'src/utils/utils';
import moment from 'moment';
// import { IconFont } from '../../../../components/IconFont';
import ScriptEditor from 'src/components/ScriptEditor';

class ModelConfig extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'modelConfig';
    this.listsComponent = UserList;
    this.queryParams = {};
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.state = {
      ...this.state,
    };

    this.model_width = 500;
  }
  componentDidMount() {}

  getColumns = () => {
    return [
      {
        title: '模型服务名称',
        key: 'deploy_name',
        dataIndex: 'deploy_name',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '模型名称',
        key: 'model_code',
        dataIndex: 'model_code',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '版本',
        key: 'model_version',
        dataIndex: 'model_version',
        ellipsis: true,
        width: 100,
      },

      {
        title: '创建人',
        dataIndex: 'create_by',
        key: 'create_by',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {text}
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '运行时长',
        dataIndex: 'runtime',
        key: 'runtime',
        ellipsis: true,
        render: (text, record) => {
          return <>{record.deploy_status === 1 ? timeTrans(Number(text)) : '--'}</>;
        },
      },
      {
        title: '状态',
        key: 'deploy_status',
        dataIndex: 'deploy_status',
        render: (text, record) => {
          return (
            <>
              {MODEL_TYPE[text]}
              {/* <Button type='link' style={{ marginLeft: '10px' }} onClick={this.showLog.bind(this, record)}>
                <IconFont type='icondaily-' />
              </Button> */}
            </>
          );
        },
      },
      {
        title: '部署时间',
        key: 'deploy_time',
        dataIndex: 'deploy_time',
      },
    ];
  };

  showLog = (record) => {
    Modal.open({
      title: '日志',
      width: '600px',
      content: <ScriptEditor value={record.deploy_info} />,
      isOkBtn: false,
      isCancelBtn: false,
    });
  };

  render() {
    const ListsComponent = this.listsComponent;

    const data = [
      {
        type: 'rangepicker',
        key: 'start',
        name: ['start_time', 'end_time'],
        defaultValue: [
          moment()
            .subtract(7, 'day')
            .startOf('day')
            .format('YYYY-MM-DD HH:mm:ss'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ],
        placeholder: ['开始时间', '结束时间'],
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入模型服务名称|模型名称进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={24}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='space-between'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.props}
            {...this.state}
            rowKey='id'
            edit={this.edit}
            queryList={this.freshQueryList}
            clearSelected={this.clearSelected}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
            map={this.map}
            detail={this.detail}
          />
        </div>
      </div>
    );
  }
}

export default ModelConfig;
